<script type="text/javascript">
function onNext(parent, panel) {  
  $(".acc-wizard-todo").click(function(e) {
    e.preventDefault();
  });
  
  hash = "#" + panel.id;
  $(".acc-wizard-sidebar",$(parent))
  .children("li")
  .children("a[href='" + hash + "']")
  .parent("li")
  .removeClass("acc-wizard-todo")
  .addClass("acc-wizard-completed");
}
$(".acc-wizard").accwizard({
  onNext: onNext
});      

// $(document).ready(function(){
//   $(function(){
//     $('#toggle_code').on('click', function(){
//       $('#accordion-demo')find('.demm').each(function() {
//         $(this).collapse('toggle');
//       });
//     });
//   });
// });

</script>

<div class="row-fluid">
  <input type="button" value="show/hide" id="toggle_code" />
      <p class="lead well">      
        This page is both a demonstration of the accordion wizard and instructions. Click the buttons and links to see the wizard in action, or view the source to see a complete implementation. Full details, including API documentation and full source code, are available on <a href="https://github.com/sathomas/acc-wizard">GitHub</a>.
      </p>
    </div>
    <div class="row-fluid acc-wizard">
      <div class="span3" style="padding-left: 2em;">
        <p style="margin-bottom: 2em;">
          Follow the steps below to follow the workflow / wizard.
        </p>
        <ol class="acc-wizard-sidebar">
          <li class="acc-wizard-todo"><a href="#prerequisites">Step One</a></li>
          <li class="acc-wizard-todo"><a href="#addwizard">Step Two</a></li>
          <li class="acc-wizard-todo"><a href="#adjusthtml">Step Three</a></li>
          <li class="acc-wizard-todo"><a href="#viewpage">Step Four</a></li>
        </ol>
      </div>
      <div class="span9">
        <div class="accordion" id="accordion-demo">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#prerequisites">
                First, Start Here
              </a>
            </div>
            <div id="prerequisites" class="accordion-body collapse in demm">
              <div class="accordion-inner">
                <div id="form-prerequisites">
                Here are details for Step 1..
                </div>
              </div> <!--/.accordion-inner -->
            </div> <!-- /#prerequisites -->
          </div> <!-- /.accordion-group -->
          
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#addwizard">
                Then, Follow these Steps
              </a>
            </div>
            <div id="addwizard" class="accordion-body collapse in demm">
              <div class="accordion-inner">
                <div id="form-addwizard">
                Here are details for Step 2..
                </div>
              </div> <!--/.accordion-inner -->
            </div> <!-- /#addwizard -->
          </div> <!-- /.accordion-group -->

          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#adjusthtml">
                You're Almost Done
              </a>
            </div>
            <div id="adjusthtml" class="accordion-body collapse in demm">
              <div class="accordion-inner">
                <div id="form-adjusthtml">
                Here are details for Step 3..
                </div>
              </div> <!--/.accordion-inner -->
            </div> <!-- /#adjusthtml -->
          </div> <!-- /.accordion-group -->

          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#viewpage">
                The Last Step
              </a>
            </div>
            <div id="viewpage" class="accordion-body collapse in demm">
              <div class="accordion-inner">
                <div id="form-viewpage">
                  <p>
                   Here are details for Step 4. Done!
                  </p>
                </div>
              </div> <!--/.accordion-inner -->
            </div> <!-- /#viewpage -->
          </div> <!-- /.accordion-group -->
          
        </div>
        
      </div>
</div>

<div class="container-fluid"><a href="http://bootply.com/63398">Edit on Bootply</a></div>